<template>
  <div id="searchRouslt">
    <header-bar :title="title" :goBack="goBack" :searchIocn="searchIocn"></header-bar>
    <sticky top="0px" z-ndex="100000">
      <div :class="{'noNaddingTop':!key}" class="nav-fixed vux-1px-b">
        <div v-show="key"  class="resultBox vux-1px">
          <div class="search_box clearfix">
            <form  class="fl search_info" id="search_form" @submit.prevent="submit" action=".">
              <i class="icon-search2"></i>
              <input type="search" v-model="inputVal" class="search" placeholder="输入您想买的宝贝名(如:电风扇)" autocomplete="off">
              <i class="icons icon_clear" style="display: none;"></i>
            </form>
            <div class="fr go_search" @click="submit" id="go_search">找券</div>
            <!-- /搜索栏 -->
          </div>
        </div>
        <div v-show="!key" class="navBox">
          <div @click="navClick(item.sort)" :class="{'current':sort==item.sort}" class="nav-item"
               v-for="(item,index) in nav">{{item.title}}
          </div>
        </div>
      </div>
    </sticky>
    <div style="height:10px;background-color:#eee"></div>
    <div class="container">
      <div @click="toTaobao(item.tbkCouponLink)" class="goods-item" v-for="(item,index) in couponListData">
        <div class="goods-pic">
          <img v-lazy="item.mainPic" alt="">
          <div class="icons" :style="{backgroundColor:item.iconColor}">{{item.iconText}}</div>
        </div>
        <div class="result_info vux-1px-b">
          <p class="result_title twoLine">{{item.name}}</p>
          <div v-show="false" class="result_tb"><i class="icons"></i><span class="vux-1px">包邮</span></div>
          <!--****************-->
          <!--priceAfterCoupon>=0-->
          <p class="result_price"  v-show="item.priceAfterCoupon>=0">
            ¥<span class="price_value">{{item.priceAfterCoupon | getCount}}</span>
            <span class="price_other">券后价</span>
          </p>
          <!--priceAfterCoupon<0-->
          <p class="result_price" v-show="item.priceAfterCoupon<0">
            ¥<span class="price_value" >{{item.price | getCount}}</span>
            <span class="price_other">{{item.couponInfo}}</span>
          </p>
          <!--****************-->
          <div class="result_bottom clearfix">
            <span class="result_ticket fl vux-1px" >领{{item.couponValue | getCount}}元券</span>
            <span class="fr ticket_number" v-show="item.couponUse>=0">{{item.couponUse}}人领用</span>
            <span class="fr ticket_number" v-show="item.totalCouponCount">{{item.totalCouponCount-item.remainCouponCount}}人领用</span>
          </div>
        </div>
      </div>
    </div>

    <p class="no_data" v-show="showNoData">没有相关的优惠券哦~</p>
    <go-top :showBottom="showBottom"></go-top>
  </div>
</template>
<script>
  import TabBar from 'src/components/common/TabBar.vue'
  import HeaderBar from 'src/components/common/headerBar.vue'
  import GoTop from 'src/components/common/bottomShow';
  import Sticky from 'vue-sticky-position'
  import MDUtils from 'src/assets/js/md-utils'
  import {URI_GETSEARCHRESULT,URI_SHZGOODS} from 'src/const/uri'
  import {getStore,setStore} from 'src/assets/js/md-utils'
  export default {
    components: {TabBar, HeaderBar, Sticky,GoTop},
    data() {
      return {
        title: '找券结果',
        showBottom:false,
        goBack:true,
        searchIocn:false,
        ticketsList: ['钢化膜', '文胸', '化妆水', '电风扇', '婴儿推车', '杯子', '女包', '玻璃杯'],
        nav: [{title:'销量',sort:'sales'}, {title:'价格',sort:'price'}, {title:'到期时间',sort:'stoptime'}],
        inputVal: '',
        couponListData:[],
        saveListData:[],
        currentIndex: 0,
        key:MDUtils.getQueryParam('key'),
        typeId:MDUtils.getQueryParam('typeId'),
        sort:'sales',
        sw:true,
        reqPage:1,
        reqPageSize:20,
        isWx:MDUtils.isWx(),
        showNoData:false,
        searchHistory:[],
      }
    },
    watch:{
      couponListData(val){
        if(val==''){
          this.showNoData=true;
        }else{
          this.showNoData=false;
        }
      }
    },
    created(){
      this.inputVal=this.key;
      if(this.inputVal){
        this.initData()
      }
      if(this.typeId){
        this.initData2();
      }
    },
    mounted(){
      document.getElementsByClassName('spinner')[0].style.display='none';
      let searchRouslt=document.getElementById('searchRouslt');
      window.addEventListener('scroll',()=>{
        let scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
        // 判断是否滚动到底部
        if(this.typeId){
          if(scrollTop + document.documentElement.clientHeight >= searchRouslt.offsetHeight) {
            if(this.sw==true){
              this.reqPage+=1;
              this.sw = false;
              this.initData2();
            }
          }
        }
        if(this.inputVal){
          if(scrollTop + document.documentElement.clientHeight >= searchRouslt.offsetHeight) {
            if(this.sw==true){
              this.reqPage+=1;
              this.sw = false;
              this.initData();
            }
          }
        }
        if(scrollTop>100){
          this.showBottom=true;
        }
        else{
          this.showBottom=false;
        }
      })
    },
    methods: {
      initData(){
        this.$ajax.get(URI_GETSEARCHRESULT,{
          key:this.inputVal,
          reqPage:this.reqPage,
          reqPageSize:this.reqPageSize,
          promotionTypeId:6,
        },(res)=>{
         // console.log('搜索成功');
          this.saveListData=this.saveListData.concat(res.data.data);
          this.couponListData=this.saveListData;
          this.sw=true;
          if(res.data.data.length<20){
            this.sw=false;
          };
          let history = getStore('searchHistory');
          if (history) {
            let checkrepeat = false;
            this.searchHistory = JSON.parse(history);
            this.searchHistory.forEach(item => {
              if (item == this.value) {
                checkrepeat = true;
              }
            });
            if (!checkrepeat) {
              this.searchHistory.unshift(this.inputVal)
            }
          } else {
            this.searchHistory.unshift(this.inputVal)
          }
          setStore('searchHistory', this.searchHistory);
          console.log(this.couponListData);
        })
      },
      //根据商品分类id
      initData2(){
        this.$ajax.get(URI_SHZGOODS,{
          reqPage:this.reqPage,
          goodCatId:this.typeId,
          promotionTypeId:6,
          sort:this.sort,
        },(res)=>{
          this.saveListData=this.saveListData.concat(res.data.data);
          this.couponListData=this.saveListData;
          this.sw=true;
          if(res.data.data.length<20){
            this.sw=false;
          };
          //console.log(this.couponListData);
        })
      },
      submit(){
        this.saveListData=[];
        this.initData();
      },
      clearInput() {
        this.inputVal = '';
      },
      goSearch() {

      },
      navClick(sort) {
        //this.currentIndex = index;
        console.log(sort);
        this.sort=sort;
        this.saveListData=[];

        this.initData2();
      },
      toTaobao(item){
        if(this.isWx){
          item=encodeURIComponent(item);
          let beforeUrl = document.URL.replace(/searchVoucher\/searchRouslt/g, "isWxOpen").split('?')[0];
          let toUrl=`${beforeUrl}?link=${item}`;
          window.location.href=toUrl;
        }else{
          window.location.href=item
        }
      }
    }

  }
</script>
<style lang="less">
  .no_data{
    text-align: center;
    margin-top:200px;
    color: #b0afb3;
    font-size: 12px;
    line-height: 45px;
  }
  .sticky{
    //border-bottom: 0.01rem solid #eee ;
    /*::after{*/
      /*content: " ";*/
      /*position: absolute;*/
      /*left: 0;*/
      /*bottom: 0;*/
      /*right: 0;*/
      /*height: 1px;*/
      /*border-bottom: 1px solid #C7C7C7;*/
      /*color: #C7C7C7;*/
      /*-webkit-transform-origin: 0 100%;*/
      /*transform-origin: 0 100%;*/
      /*-webkit-transform: scaleY(0.5);*/
      /*transform: scaleY(0.5);*/
    /*}*/
    div{
      &:nth-child(2){
        height: 0;
      }
    }
  }
  @import "searchRouslt";
</style>
